<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>

:root{
    --header-height: .9rem;
    --tabbar-height: 1rem;
  }

  ::-webkit-scrollbar{
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb{
    background-color: rgba(0, 0, 0, .06);
    border-radius: 3px;
  }

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex: none;
  }

  a{
    color: inherit;
    text-decoration: none;
  }

  html{
    font-size: calc(100vw / 7.5);
    background-color: #e0e0e0;
  }
  
  @media screen and (min-width: 750px) {
    html{
      font-size: 100px !important;
    }
  }

  body{
    font-size: 14px;
  }

  .app,
  .header,
  .tabbar{
    max-width: 750px;
    width: 100%;
    background-color: white;
  }

  .app{
    margin-left: auto;
    margin-right: auto;
  }

  .main{
    padding-top: var(--header-height);
    padding-bottom: var(--tabbar-height);
  }

  .header,
  .tabbar{
    display: flex;
    position: fixed;
    z-index: 99;
  }

  .header{
    top: 0;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    height: var(--header-height);
    align-items: center;
  }

  .header h1{
    font-size: 0.3rem;
    font-weight: normal;
  }

  .tabbar{
    bottom: 0;
    height: var(--tabbar-height);
  }
  .tabbar a{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
  }

  .tabbar a i{
    font-size: 0.4rem;
    margin-bottom: 0.05rem;
    color: #555;
  }

  .tabbar a span{
    font-size: 0.2rem;
    color: #848484;
  }

  .tabbar a.active i{
    color: #ee1133;
  }

  .tabbar a.active span{
    color: #000;
  }

  .swiper img{
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  </style>
  <div class="app">
    <div class="header">头部</div>
    <div class="main">
      <div style="height: 2000px;"> 主体
      </div>
     </div>
    <div class="tabbar">底部</div>
  </div>
  <script src="js/flexible.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
</body>
</html>